<!--
 * @Author: DUST
 * @Date: 2023-06-27 13:57:28
 * @LastEditors: DUST
 * @LastEditTime: 2023-06-28 14:43:06
 * @FilePath: \vite-project\src\views\admin\navigate\index.vue
 * @Description: 
 * undefined
-->
<template>
  <admin-page-template>
    <div class="tableHeader">
      <div class="flex"></div>
      <div class="flex">
        <table-top-btns :list="buttonList"></table-top-btns>
      </div>
    </div>
    <!-- 表格 -->
    <ant-table
      v-model:rowskeys="rowskeys"
      v-model:pagination="pagination"
      :dataSource="tableData"
      :loading="tableLoading"
      :columns="columns"
    >
      <template #operation="{record}">
        <a @click="showEdit(record)">编辑</a>
        <a-divider type="vertical" />
        <a-popconfirm title="请确认是否删除？" @confirm="doDeleteWebsite(record)">
          <a>删除</a>
        </a-popconfirm>
      </template>
    </ant-table>

    <!-- 导航类型 -->
    <addNavigateType 
      v-if="typeVisible && modalOption == modalOptions.WEBSITETYPE"
      v-model:visible="typeVisible"
      :title="typeTitle"
      :type="type"
      :loading="loading"
      @ok="doTypeConfirm"
    />
    <!-- 网站弹窗 -->
    <addWebsiteModal
      v-if="typeVisible && modalOption == modalOptions.WEBSITEITEM"
      v-model:visible="typeVisible"
      :title="typeTitle"
      :type="type"
      :loading="loading"
      :typeList="typeList"
      :data="editData"
      @ok="doTypeConfirm"
    />
  </admin-page-template>
</template>

<script setup lang="ts">
import addNavigateType from "../components/addNavigateType.vue";
import addWebsiteModal from "../components/addWebsiteModal.vue";
import Navigate, { modalOptions }  from "./";

const {
  rowskeys,
  tableLoading,
  pagination,
  tableData,
  columns,
  // 按钮合集
  buttonList,
  // 导航类型
  typeTitle,
  typeVisible,
  type,
  loading,
  modalOption,
  typeList,
  doTypeConfirm,
  showEdit,
  editData,
  doDeleteWebsite
} =  new Navigate();

</script>

<style lang="less" scoped>

</style>